<template>  
  <div>  
    <h2>Eva.js Animation Demo</h2>  
    <button @click="animate">动画</button>  
    <div id="myElement" class="animated"></div>  
  </div>  
</template>  
  
<script>  
import { animate } from 'eva';  
  
export default {  
  data() {  
    return {  
      myElement: null,  
      animation: null  
    };  
  },  
  mounted() {  
    // 初始化动画  
    this.animation = new animate.ValueAnimator(this.myElement, {  
      duration: 5000,  
      easing: 'easeOutQuad',  
      step: function(value) {  
        this.myElement.style.opacity = value / 100;  
      },  
      loop: true  
    });  
  
    // 动画更新函数  
    this.animation.setValue({ opacity: 0 });  
  },  
  methods: {  
    animate() {  
      // 开始动画  
      this.animation.start();  
  
      // 等待一段时间  
      setTimeout(() => {  
        // 动画结束后执行的函数  
        this.animation.stop();  
      }, 1000);  
    }  
  }  
};  
</script>  
  
<style scoped>  
.animated {  
  animation-name: animationName;  
  animation-duration: duration;  
  animation-iteration-count: iterationCount;  
  animation-timing-function: timingFunction;  
  animation-fill-mode: fillMode;  
}  
</style>